import React, { useState } from "react";
import {
  Row,
  Col,
  Select,
  Breadcrumb,
  Menu,
} from "antd";
import {
  SmileOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "./personalCenter.css";
import { Link, Route, } from "react-router-dom";
import Basic from "./basic";
import UserEditor from "./editor";
import PCShow from "./pCShow";

class PersonalCenter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }
  handleMenuClick = (e) => {
    console.log("click ", e);
    this.setState({
      current: e.key,
    });
  };

  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>
            <Link to="/m/index">首页</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>个人中心</Breadcrumb.Item>
        </Breadcrumb>
        <div className="admin-body" style={{ padding: 24, minHeight: 360 }}>
          <Row>
            <Col span={4}>
              <Menu
                selectedKeys={[this.state.current]}
                onClick={this.handleMenuClick}
              >
                <Menu.Item key="a" icon={<SettingOutlined />}>
                  <Link to="/m/personalcenter/a">基本信息设置</Link>
                </Menu.Item>
                <Menu.Item key="b" icon={<SmileOutlined />}>
                  <Link to="/m/personalcenter/b/h">个人主页</Link>
                </Menu.Item>
              </Menu>
            </Col>
            <Col span={20} style={{ padding: 24, width: "100%" }}>
              <Row justify="center">
                <Route path="/m/personalcenter/a/">
                  <Basic />
                </Route>
              </Row>
              <Route path="/m/personalcenter/b/">
                <Route path="/m/personalcenter/b/h">
                  <PCShow />
                </Route>
                <Route path="/m/personalcenter/b/e">
                  <UserEditor />
                </Route>
              </Route>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default PersonalCenter;
